<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Explaining the Document Object Model</title>
    <style>
        body{
            font-family:"Helvetical","Arial","sans-serif";
            font-size:10pt;
        }
        abbr{
            text-decoration:none;
            border:0;
            font-style:normal;
        }
    </style>
</head>
<body>
<h1>What is the Document Object Model?</h1>
<p>
    the <abbr title="Wolrd Wide Web Consortium">W3C</abbr>defines the <abbr title="Document Object Model">DOM</abbr>as:
</p>
<blockquote cite="http://www.w3.org/DOM/">
    <p>
        A platform- and language-neutral interface that will allow
        programs and scripts to dynamically access and update the content,
        structure and style of documents.
    </p>
</blockquote>
<p>
    It is an <abbr title="Application Promgramming Interface">API</abbr>
    that can be used to navigate <abbr title="HyperText Markup Language">
    HTML</abbr>and <abbr title="eXtensible Markup Language">XML
</abbr>documents.
</p>
<ul id="navigation">
    <li><a href="http://www.baidu.com" accesskey="1">Baidu</a></li>
    <li><a href="http://www.taobao.com" accesskey="4">Taobao</a></li>
    <li><a href="http://www.mi.com" accesskey="0">Xiaomi</a></li>
</ul>
<script>
    //addLoadEvent函数
    function addLoadEvent(func){
        var oldonload=window.onload;
        if(typeof window.onload!='function'){
            window.onload=func;
        }else{
            window.onload=function(){
                oldonload();
                func();
            }
        }
    }
    //显示缩略语列表
    function displayAbbreviations(){
        //测试内容
        if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;
        //取得所有缩略词
        var  abbreviations=document.getElementsByTagName("abbr");
        if(abbreviations.length<1) return false;
        var defs=new Array();
        //遍历这些缩略词
        for(var i=0;i<abbreviations.length;i++){
            var current_abbr=abbreviations[i];
            //防止因某个缩略词的内容不存在而导致程序报错终止
            if(current_abbr.childNodes.length<1) continue;
            var definition=current_abbr.getAttribute("title");
            var key=current_abbr.lastChild.nodeValue;//将abbr的内容赋给数组作键
            defs[key]=definition;//将abbr的title的内容赋给数组作键值
        }
        //创建定义列表
        var dlist=document.createElement("dl");
        //遍历定义
        for(key in defs){
            var definition=defs[key];
            //创建定义标题
            var dtitle=document.createElement("dt");
            var dtitle_text=document.createTextNode(key);
            dtitle.appendChild(dtitle_text);
            //创建定义描述
            var ddesc=document.createElement("dd");
            var ddesc_text=document.createTextNode(definition);
            ddesc.appendChild(ddesc_text);
            //把它们添加到定义列表
            dlist.appendChild(dtitle);
            dlist.appendChild(ddesc);
        }
        //确保创建了自定义列表
        if(dlist.childNodes.length<1) return false;
        //创建标题
        var header=document.createElement("h2");
        var header_text=document.createTextNode("Abbreviations");
        header.appendChild(header_text);
        //把标题添加到页面主体
        document.body.appendChild(header);
        //把自定义列表添加到页面主体
        document.body.appendChild(dlist);
    }
    //显示文献链接
    function disPlayCitations(){
        //添加测试内容
        if(!document.getElementsByClassName||!document.createElement||!document.createTextNode) return false;
        //取得所有引用
        var quotes=document.getElementsByTagName("blockquote");
        //遍历引用
        for(var i=0;i<quotes.length;i++){
            //如果没有cite属性继续循环
            if(!quotes[i].getAttribute("cite")) continue;
            //保存cite属性
            var url=quotes[i].getAttribute("cite");
            //取得引用中的所有元素节点
            var quoteChildren=quotes[i].getElementsByTagName("*");
            //如果没有元素节点，继续循环
            if(quoteChildren.length<1) continue;
            //取得引用最后一个元素节点
            var elem=quoteChildren[quoteChildren.length-1];
            //创建标记
            var link=document.createElement("a");
            var link_text=document.createTextNode("source");
            link.appendChild(link_text);
            link.setAttribute("href",url);
            var superscript=document.createElement("sup");
            superscript.appendChild(link);
            //把标记添加到引用中的最后一个元素节点
            elem.appendChild(superscript);
        }
    }
    //创建快捷键清单
    function displayAccesskeys(){
        //测试内容
        if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;
        //取得文档中的所有链接
        var links=document.getElementsByTagName("a");
        //创建一个数组，保存访问键
        var akeys=new Array();
        //遍历链接
        for(var i=0;i<links.length;i++){
            var current_link=links[i];
            //如果没有accesskey属性，继续循环
            if(!current_link.getAttribute("accesskey")) continue;
            //取得accesskey的值
            var key=current_link.getAttribute("accesskey");
            //取得链接文本
            var text=current_link.lastChild.nodeValue;
            //添加到数组
            akeys[key]=text;
        }
        //创建列表
        var list=document.createElement("ul");
        //遍历访问键
        for(key in akeys){
            var text=akeys[key];
            //创建放到列表项的字符串
            var str=key+":"+text;
            //创建列表项
            var item=document.createElement("li");
            var item_text=document.createTextNode(str);
            item.appendChild(item_text);
            //把列表项添加到列表中
            list.appendChild(item);
        }
        //创建标题
        var header=document.createElement("h3");
        var header_text=document.createTextNode("Accesskeys");
        header.appendChild(header_text);
        //把标题添加到页面主体
        document.body.appendChild(header);
        //把列表添加到页面主体
        document.body.appendChild(list);

    }
    addLoadEvent(displayAbbreviations);
    addLoadEvent(disPlayCitations);
    addLoadEvent(displayAccesskeys);
</script>
</body>
</html>